<template>
  <div class="fabric-api-list">
    <el-select
      v-model="curApiCode"
      refs="selector"
      filterable
      :placeholder="$demoi18n('word.plsSelect')"
      size="default"
      :class="`panel-data-select-${xvueTheme}`"
      :popper-class="popperClass"
      @visible-change="visibleChange"
      @input="filterInput"
    >
      <el-option
        v-for="(item, i) in apiList"
        :key="i"
        :label="item.name"
        :value="item.code"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    apiList: Array,
    value: String,
  },
  emits: ['update:value', 'change', 'visible-change'],
  data() {
    return {
      xvueTheme: window._adoPremise.uc.theme,
      popperClass: `select-poper-${window._adoPremise.uc.theme || 'light'}`,
      curApiCode: this.value,
      curApiName: '',
    };
  },
  watch: {
    apiList(newVal, oldVal) {
      if (oldVal && oldVal.length) {
        this.curApiCode = '';
      }
    },
    value(newVal) {
      this.curApiCode = newVal;
    },
    curApiCode(newVal, oldVal) {
      if (newVal !== this.value) {
        this.$emit('update:value', newVal);
        this.$emit('change', newVal);
      }
      const item = this.apiList.find(n => n.code === newVal);
      this.curApiName = item ? item.name : '';
    },
  },
  methods: {
    visibleChange(val) {
      this.searchStr = '';
      this.$emit('visible-change');
    },
    filterInput() {
      const searchStr = this.$refs.selector.$data.selectedLabel;
      this.searchStr = searchStr;
    },
  },
};
</script>
